<template>
  <div class="exam-table">

    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" label="试卷名称">
      </el-table-column>
      <el-table-column prop="score" label="总分">
      </el-table-column>
      <el-table-column prop="num" label="总题目数">
      </el-table-column>
      <el-table-column prop="requirement" label="要求">
        <template slot-scope="scope">
          <el-tooltip placement="left">
            <div slot="content" v-html="scope.row.requirement"></div>
            <el-button class="max-height" v-html="scope.row.requirement"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="seconds" label="限时(分)">
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <el-tooltip placement="left">
            <div slot="content" v-html="scope.row.describes"></div>
            <el-button class="max-height" v-html="scope.row.describes"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="examTypeName" label="试卷类型">
      </el-table-column>
      <el-table-column label="组卷时间" width="120">
        <template slot-scope="scope">
          {{scope.row.createTime | formatDate}}
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          {{scope.row.isUse==='1'?'启用':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="editExam(scope.row)">编辑</el-button>
          <el-button type="text" @click="delExam(scope.row)">删除</el-button>
          <router-link :to="{path:'/exam/set-question',query:{id:scope.row.id}}">
            <el-button type="text">题目明细</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'exam-table',
  data() {
    return {
      test: ''
    }
  },
  props: ['tableData'],
  methods: {

    handleSelectionChange(val) {
      console.log(val)
      this.$emit('select-change', val)
    },
    async editExam(row) {
      if (row.isUse === '1') {
        this.$message("需要更改应该先冻结试卷")
      } else {
        this.$router.push({ path: '/exam/add-exam', query: { id: row.id } })
      }
    },
    async delExam(row) {
      if (row.isUse === '1') {
        this.$message("需要更改应该先冻结试卷")
      } else {
        this.$confirm('确认删除?', '警告').then(async () => {
          let { data } = await delExam({ id: row.id })
          if (data.success) {
            if (data.data.success) {
              this.$message('删除成功')
              this.$parent.findExamPage({})
            } else {
              this.$message(data.data.message)
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.max-height
    display inline-block
    max-height 90px
    max-width 150px
    overflow hidden
    padding 0
    border 0
</style>
